<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多风格左侧弹出组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 150vh;
      padding-bottom: 20px;
      transition: background-color 0.3s;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      padding-top: 20px;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .menu-toggle {
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      margin-right: 10px;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      flex: 1;
    }
    
    .nav-actions {
      display: flex;
      gap: 10px;
    }
    
    .nav-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 内容区域 */
    .feed-item {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .feed-header {
      padding: 12px 15px;
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 15px;
      margin: 0 0 2px 0;
    }
    
    .post-time {
      font-size: 12px;
      opacity: 0.7;
    }
    
    .feed-content {
      padding: 0 15px 12px;
    }
    
    .post-text {
      margin: 0 0 10px 0;
      line-height: 1.5;
    }
    
    .post-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    .feed-actions {
      padding: 8px 15px;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid;
    }
    
    .action-btn {
      background: none;
      border: none;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
      border: 1px solid rgba(0,0,0,0.1);
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #0d6efd;
    }
    
    /* 左侧弹出菜单 */
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      z-index: 1000;
      transition: opacity 0.3s;
    }
    
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 85%;
      max-width: 300px;
      height: 100vh;
      z-index: 1001;
      transform: translateX(-100%);
      transition: transform 0.3s ease-out;
      display: flex;
      flex-direction: column;
    }
    
    .sidebar.active {
      transform: translateX(0);
    }
    
    .sidebar-header {
      padding: 20px 15px;
      border-bottom: 1px solid;
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .profile-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .profile-info {
      flex: 1;
    }
    
    .profile-name {
      font-weight: 600;
      font-size: 17px;
      margin: 0 0 5px 0;
    }
    
    .profile-status {
      font-size: 13px;
      opacity: 0.8;
    }
    
    .sidebar-menu {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }
    
    .menu-section {
      margin-bottom: 15px;
    }
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      gap: 15px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .menu-item:hover {
      background-color: rgba(0,0,0,0.05);
    }
    
    .menu-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    
    .menu-text {
      font-size: 16px;
      font-weight: 500;
    }
    
    .menu-badge {
      margin-left: auto;
      background-color: rgba(0,0,0,0.1);
      border-radius: 10px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .sidebar-footer {
      padding: 15px 20px;
      border-top: 1px solid;
    }
    
    .footer-menu {
      display: flex;
      justify-content: space-between;
    }
    
    .footer-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
    }
    
    .toast {
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 15px;
      display: none;
    }
    
    /* 风格1 - 经典蓝 */
    .style-1 {
      background-color: #f8f9fa;
      color: #212529;
    }
    
    .style-1 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .style-1 .menu-toggle,
    .style-1 .nav-btn {
      color: #0d6efd;
    }
    
    .style-1 .feed-item {
      background-color: white;
    }
    
    .style-1 .feed-actions {
      border-color: #e9ecef;
    }
    
    .style-1 .action-btn {
      color: #6c757d;
    }
    
    .style-1 .action-btn:hover {
      color: #0d6efd;
    }
    
    .style-1 .sidebar {
      background-color: white;
    }
    
    .style-1 .sidebar-header,
    .style-1 .sidebar-footer {
      border-color: #e9ecef;
    }
    
    .style-1 .menu-item.active {
      background-color: #e7f1ff;
    }
    
    .style-1 .menu-icon,
    .style-1 .menu-item.active .menu-text {
      color: #0d6efd;
    }
    
    .style-1 .menu-badge {
      background-color: #e7f1ff;
      color: #0d6efd;
    }
    
    .style-1 .footer-btn {
      color: #6c757d;
    }
    
    /* 风格2 - 活力橙 */
    .style-2 {
      background-color: #fff9f0;
      color: #854d0e;
    }
    
    .style-2 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(249, 115, 22, 0.1);
    }
    
    .style-2 .menu-toggle,
    .style-2 .nav-btn {
      color: #ea580c;
    }
    
    .style-2 .feed-item {
      background-color: white;
    }
    
    .style-2 .feed-actions {
      border-color: #ffeedd;
    }
    
    .style-2 .action-btn {
      color: #c2410c;
    }
    
    .style-2 .action-btn:hover {
      color: #ea580c;
    }
    
    .style-2 .sidebar {
      background-color: white;
    }
    
    .style-2 .sidebar-header,
    .style-2 .sidebar-footer {
      border-color: #ffeedd;
    }
    
    .style-2 .menu-item.active {
      background-color: #fff3cd;
    }
    
    .style-2 .menu-icon,
    .style-2 .menu-item.active .menu-text {
      color: #ea580c;
    }
    
    .style-2 .menu-badge {
      background-color: #fff3cd;
      color: #ea580c;
    }
    
    .style-2 .footer-btn {
      color: #c2410c;
    }
    
    /* 风格3 - 暗黑系 */
    .style-3 {
      background-color: #1e293b;
      color: #f8fafc;
    }
    
    .style-3 .navbar {
      background-color: #0f172a;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .style-3 .menu-toggle,
    .style-3 .nav-btn {
      color: #93c5fd;
    }
    
    .style-3 .feed-item {
      background-color: #0f172a;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .style-3 .feed-actions {
      border-color: #334155;
    }
    
    .style-3 .action-btn {
      color: #94a3b8;
    }
    
    .style-3 .action-btn:hover {
      color: #93c5fd;
    }
    
    .style-3 .sidebar {
      background-color: #0f172a;
    }
    
    .style-3 .sidebar-header,
    .style-3 .sidebar-footer {
      border-color: #334155;
    }
    
    .style-3 .menu-item.active {
      background-color: #1e40af;
    }
    
    .style-3 .menu-icon,
    .style-3 .menu-item.active .menu-text {
      color: #93c5fd;
    }
    
    .style-3 .menu-badge {
      background-color: #1e40af;
      color: #93c5fd;
    }
    
    .style-3 .footer-btn {
      color: #94a3b8;
    }
    
    /* 风格4 - 清新绿 */
    .style-4 {
      background-color: #f0fdf4;
      color: #166534;
    }
    
    .style-4 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(16, 185, 129, 0.1);
    }
    
    .style-4 .menu-toggle,
    .style-4 .nav-btn {
      color: #15803d;
    }
    
    .style-4 .feed-item {
      background-color: white;
    }
    
    .style-4 .feed-actions {
      border-color: #dcfce7;
    }
    
    .style-4 .action-btn {
      color: #166534;
    }
    
    .style-4 .action-btn:hover {
      color: #15803d;
    }
    
    .style-4 .sidebar {
      background-color: white;
    }
    
    .style-4 .sidebar-header,
    .style-4 .sidebar-footer {
      border-color: #dcfce7;
    }
    
    .style-4 .menu-item.active {
      background-color: #dcfce7;
    }
    
    .style-4 .menu-icon,
    .style-4 .menu-item.active .menu-text {
      color: #15803d;
    }
    
    .style-4 .menu-badge {
      background-color: #dcfce7;
      color: #15803d;
    }
    
    .style-4 .footer-btn {
      color: #166534;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #0d6efd;"></button>
    <button class="style-btn" data-style="2" style="background-color: #ea580c;"></button>
    <button class="style-btn" data-style="3" style="background-color: #3b82f6;"></button>
    <button class="style-btn" data-style="4" style="background-color: #15803d;"></button>
  </div>
  
  <!-- 风格1 - 经典蓝 -->
  <div class="page-container style-1 active" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="menu-toggle">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-search"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">张明</h3>
            <p class="post-time">今天 09:45</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">周末去了郊外的森林公园，空气特别好，推荐给大家！这里的秋天真的太美了，层林尽染，随手一拍都是壁纸～</p>
          <img src="https://picsum.photos/600/400?random=10" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>245</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>42</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
      
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">李华</h3>
            <p class="post-time">昨天 18:30</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">新尝试的烘焙配方，抹茶红豆蛋糕，味道还不错！有没有烘焙爱好者一起交流一下技巧？</p>
          <img src="https://picsum.photos/600/400?random=11" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>189</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>36</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格2 - 活力橙 -->
  <div class="page-container style-2" data-style="2">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="menu-toggle">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-search"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">张明</h3>
            <p class="post-time">今天 09:45</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">周末去了郊外的森林公园，空气特别好，推荐给大家！这里的秋天真的太美了，层林尽染，随手一拍都是壁纸～</p>
          <img src="https://picsum.photos/600/400?random=10" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>245</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>42</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
      
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">李华</h3>
            <p class="post-time">昨天 18:30</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">新尝试的烘焙配方，抹茶红豆蛋糕，味道还不错！有没有烘焙爱好者一起交流一下技巧？</p>
          <img src="https://picsum.photos/600/400?random=11" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>189</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>36</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格3 - 暗黑系 -->
  <div class="page-container style-3" data-style="3">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="menu-toggle">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-search"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">张明</h3>
            <p class="post-time">今天 09:45</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">周末去了郊外的森林公园，空气特别好，推荐给大家！这里的秋天真的太美了，层林尽染，随手一拍都是壁纸～</p>
          <img src="https://picsum.photos/600/400?random=10" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>245</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>42</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
      
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">李华</h3>
            <p class="post-time">昨天 18:30</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">新尝试的烘焙配方，抹茶红豆蛋糕，味道还不错！有没有烘焙爱好者一起交流一下技巧？</p>
          <img src="https://picsum.photos/600/400?random=11" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>189</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>36</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 风格4 - 清新绿 -->
  <div class="page-container style-4" data-style="4">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="menu-toggle">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">首页</h1>
        <div class="nav-actions">
          <button class="nav-btn">
            <i class="fa fa-search"></i>
          </button>
          <button class="nav-btn">
            <i class="fa fa-bell"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">张明</h3>
            <p class="post-time">今天 09:45</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">周末去了郊外的森林公园，空气特别好，推荐给大家！这里的秋天真的太美了，层林尽染，随手一拍都是壁纸～</p>
          <img src="https://picsum.photos/600/400?random=10" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>245</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>42</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
      
      <div class="feed-item">
        <div class="feed-header">
          <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
          <div class="user-info">
            <h3 class="user-name">李华</h3>
            <p class="post-time">昨天 18:30</p>
          </div>
        </div>
        <div class="feed-content">
          <p class="post-text">新尝试的烘焙配方，抹茶红豆蛋糕，味道还不错！有没有烘焙爱好者一起交流一下技巧？</p>
          <img src="https://picsum.photos/600/400?random=11" alt="帖子图片" class="post-image">
        </div>
        <div class="feed-actions">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>189</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>36</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 左侧弹出菜单 -->
  <div class="sidebar-overlay"></div>
  <div class="sidebar">
    <div class="sidebar-header">
      <img src="https://picsum.photos/200/200?random=99" alt="个人头像" class="profile-avatar">
      <div class="profile-info">
        <h3 class="profile-name">王小明</h3>
        <p class="profile-status">@wangxiaoming</p>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-item active">
          <div class="menu-icon">
            <i class="fa fa-home"></i>
          </div>
          <div class="menu-text">首页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-user"></i>
          </div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-compass"></i>
          </div>
          <div class="menu-text">发现</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-bookmark-o"></i>
          </div>
          <div class="menu-text">收藏</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-bell-o"></i>
          </div>
          <div class="menu-text">通知</div>
          <div class="menu-badge">12</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-cog"></i>
          </div>
          <div class="menu-text">设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-question-circle-o"></i>
          </div>
          <div class="menu-text">帮助与反馈</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-info-circle"></i>
          </div>
          <div class="menu-text">关于我们</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-item">
          <div class="menu-icon">
            <i class="fa fa-sign-out"></i>
          </div>
          <div class="menu-text">退出登录</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <button class="footer-btn">
          <i class="fa fa-moon-o"></i>
        </button>
        <button class="footer-btn">
          <i class="fa fa-language"></i>
        </button>
        <button class="footer-btn">
          <i class="fa fa-gear"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast-container">
    <div class="toast" id="toast-notification">操作成功</div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取当前激活的页面容器
    function getActivePage() {
      return document.querySelector('.page-container.active');
    }
    
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    const sidebar = document.querySelector('.sidebar');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
        
        // 更新侧边栏样式
        updateSidebarStyle(style);
      });
    });
    
    // 更新侧边栏样式
    function updateSidebarStyle(style) {
      // 移除所有风格类
      sidebar.className = sidebar.className.replace(/style-\d+/g, '');
      // 添加当前风格类
      sidebar.classList.add(`style-${style}`);
    }
    
    // 初始化侧边栏样式
    updateSidebarStyle(1);
    
    // 打开侧边栏
    function openSidebar() {
      document.querySelector('.sidebar-overlay').style.display = 'block';
      sidebar.classList.add('active');
      document.body.style.overflow = 'hidden';
    }
    
    // 关闭侧边栏
    function closeSidebar() {
      document.querySelector('.sidebar-overlay').style.display = 'none';
      sidebar.classList.remove('active');
      document.body.style.overflow = 'auto';
    }
    
    // 菜单按钮点击事件
    document.querySelectorAll('.menu-toggle').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          openSidebar();
        }
      });
    });
    
    // 关闭侧边栏事件
    document.querySelector('.sidebar-overlay').addEventListener('click', closeSidebar);
    
    // 侧边栏菜单项点击事件
    document.querySelectorAll('.menu-item').forEach(item => {
      item.addEventListener('click', function() {
        // 移除其他菜单项的活跃状态
        document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
        // 添加当前菜单项的活跃状态
        this.classList.add('active');
        
        // 显示提示并关闭侧边栏
        const menuText = this.querySelector('.menu-text').textContent;
        showToast(`已切换到${menuText}`);
        setTimeout(closeSidebar, 300);
      });
    });
    
    // 底部按钮点击事件
    document.querySelectorAll('.footer-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const iconClass = this.querySelector('i').className;
        let text = '';
        
        if (iconClass.includes('moon-o')) text = '切换夜间模式';
        else if (iconClass.includes('language')) text = '语言设置';
        else if (iconClass.includes('gear')) text = '更多设置';
        
        showToast(text);
      });
    });
    
    // 帖子操作按钮点击事件
    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const actionText = this.querySelector('span').textContent;
        if (actionText === '分享') {
          showToast('分享功能已触发');
        } else if (actionText.includes('评论')) {
          showToast('查看评论列表');
        } else {
          showToast('点赞成功');
          this.querySelector('i').className = 'fa fa-heart';
          this.querySelector('span').textContent = parseInt(actionText) + 1;
        }
      });
    });
    
    // 导航栏按钮点击事件
    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const iconClass = this.querySelector('i').className;
        if (iconClass.includes('search')) {
          showToast('打开搜索');
        } else if (iconClass.includes('bell')) {
          showToast('查看通知');
        }
      });
    });
    
    // 显示提示框
    function showToast(message) {
      const toast = document.getElementById('toast-notification');
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
